<template>
    <div class="content">
        <div class="center height-190">
            <div class="box">
                <div class="box-big" v-for="item in arrData" :key="item.name">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="center">
            <div class="display">
                <div class="call">
                    <img src="../assets/img/logMK.png" alt="" />
                </div>
                <div>
                    <img
                        src="../assets/img/logSX.png"
                        alt=""
                        srcset=""
                    />
                </div>
            </div>
        </div>
        <div class="close" @click="btn">X</div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        arrData: Array,
    },
    data() {
        return {};
    },
    methods: {
        btn() {
            this.$emit("switchCancel", false);
        },
    },
    created() {},
};
</script>
<style scoped>
.content {
    border: 1px solid #f2f2f2;
    background: #031032;
    padding-top: 20px;
}
.display {
    display: flex;
    align-items: center;
}
.j-c {
    justify-content: space-between;
}
.close {
    width: 84px;
    height: 84px;
    background: #b5393c;
    color: #ffffff;
    border-radius: 100%;
    margin: auto;
    text-align: center;
    line-height: 84px;
    font-size: 36px;
    margin-top: 70px;
}
.call {
    width: 84px;
    height: 84px;
    background: #ffffff;
    color: #ffffff;
    border-radius: 100%;
    margin: auto;
    text-align: center;
    line-height: 100px;
    font-size: 36px;
    margin-right: 106px;
}
.center {
    display: flex;
    justify-items: center;
    justify-content: center;
    margin-bottom: -40px;
}
.box {
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    padding: 40px 0;
    box-sizing: border-box;
}
.box-big {
    width: 176px;
    height: 166px;
    text-align: center;
    line-height: 166px;
    border: 1px solid #797979;
    margin: 0px 24px 20px;
    font-size: 20px;
    font-weight: 300;
    color: #fff;
}
.height-190 {
    height: calc(100% - 190px);
}
</style>
